<script lang='ts' setup>
import { getPicture } from '@/assets/工具/工具类';
import TitleBar from '@/components/标题.vue';
import router from '@/router';
import type { ImageBaseUrl } from '@/types';
import { ref } from 'vue';
import { showConfirmDialog } from 'vant';
const URL = ref<ImageBaseUrl>({} as ImageBaseUrl)
const pageBack = () => {
    router.push('/')
}


const immediatelyBooking = () =>{
    // sessionStorage.setItem('nextPage','/immediatelyBooking')

    if(sessionStorage.getItem('token')){
      router.push('/immediatelyBooking')
      
    }else{
      handleClick()
    }
    
}
const bookingVisitSchoolList = () =>{
    // sessionStorage.setItem('nextPage','/bookingVisitSchoolList')
    // router.push('/bookingVisitSchoolList')
    if(sessionStorage.getItem('token')){
      router.push('/bookingVisitSchoolList')
      
    }else{
      handleClick1()
    }
}
const path = () =>{
    router.push('/PersonalCenter')
}


const handleClick1 = async () => {

showConfirmDialog({
title: '小匡提醒您！',
message:
'检测到您还没登录，确认将进入登录页面！',
})
.then(() => {
// on confirm
    router.push('/bookingVisitSchoolList')

})
.catch(() => {
// on cancel
});

};





import { showToast } from 'vant';

const showShare = ref(false);
const options = [
 
  [
    { name: '个人中心', icon: 'manager-o' },
    { name: '预约进校', icon: 'todo-list' },
    { name: '摄影定制', icon: 'balance-list' },
    { name: '订单详情', icon: 'bars' },
  ],
  [
    { name: '回到主页', icon: 'flag-o' },
    { name: '二维码', icon: 'qrcode' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
  ],
];

interface Option {
  name: string;

}

const onSelect = (option:Option) => {
  showShare.value = false;
  switch (option.name) {

    case '回到主页' :

      index();
    break;
    case '微博':
      shareToWeibo();
      break;
    case 'QQ':
      shareToQQ();
      break;
    case '个人中心':
      copyLink();
      break;
    case '预约进校':
      sharePoster();
      break;
    case '二维码':
      shareQRCode();
      break;
    case '摄影定制':
      shareWeappQRCode();
      break;
      case '订单详情':
      shareWeap();
      break;
    default:
      showToast('暂不支持该分享方式');
  }
};

const index = () =>{

  router.push('/')
}
const shareWeap = () =>{
router.push('/bookingVisitSchoolList')
}

// 分享到微博
const shareToWeibo = () => {
  const url = `https://service.weibo.com/share/share.php?url=${encodeURIComponent(
    `${path}`
  )}&title=${encodeURIComponent('我的大学城')}`;
  window.open(url, '_blank');
  showToast('已分享到微博');
};

// 分享到QQ
const shareToQQ = () => {
  const url = `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(
    `${path}`
  )}&title=${encodeURIComponent('我的大学城')}`;
  window.open(url, `${path}`);
  showToast('已分享到QQ');
};

// 复制链接
const copyLink = () => {
  router.push('/PersonalCenter')
};

// 分享海报
const sharePoster = () => {
  router.push('/bookingVisitSchool')
};

// 分享二维码
const shareQRCode = () => {
  // 生成二维码的逻辑
  showPopup()
  saveQrCode()
  showToast('点击保存二维码');
};

const shareWeappQRCode = () => {
  router.push('/PictureStyle')
};




import Qrcode from 'qrcode.vue';
import html2canvas from 'html2canvas';

const qrcodeRef = ref(null);
const qrCodeValue = ref(`${path}`);
const qrCodeOptions = ref({
  width: 200,
  height: 200,
  colorDark: '#000000',
  colorLight: '#ffffff',
});

const saveQrCode = async () => {
  if (qrcodeRef.value) {
    try {
      
      const canvas = await html2canvas(qrcodeRef.value);
      const link = document.createElement('a');
      link.download = 'qrcode.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
    } catch (error) {
      console.error('保存二维码失败:', error);
    }
  }
};

const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };


    interface Offset {
  x: number;
  y: number;
}
const onOffsetChange = (offset :Offset) => {
      // showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
      // if(`${offset.x.toFixed(0)} == 312 || ${offset.x.toFixed(0)} == 32`){

      // }

      showToast(`别拖了，疼死了`);

    };
    const onCancel = () => {
      showToast('小匡提醒您！已取消')
};


const handleClick = async () => {

showConfirmDialog({
title: '小匡提醒您！',
message:
'检测到您还没登录，确认将进入登录页面！',
})
.then(() => {
// on confirm
    router.push('/immediatelyBooking')

})
.catch(() => {
// on cancel
});

};

</script>
<template>
    <div class="组件根标签">
        <div class="标题栏">
            <div class="标题栏占位" @click="pageBack">
                <img src="@/assets/图片/通用/白色返回箭头.png" class="返回箭头 块级图片">
            </div>
            预约信息
            <div class="标题栏占位" @click="path">
            <img class="IMG" src="../assets/图片/通用/个人.jpg" alt="">
        </div>
        </div>
        <van-notice-bar left-icon="volume-o" :scrollable="false">
  <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :touchable="false"
    :show-indicators="false"
  >
    <van-swipe-item>我本将心照明月，奈何明月照沟渠。</van-swipe-item>
    <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
    <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
  </van-swipe>
</van-notice-bar>


        <!-- <img :src="getPicture('校园/预约进校封面图.png')" id="封面图"> -->
        <img src="@/assets/图片/backgroundImage/56654.jpg" id="封面图">

    
        {{ URL.url }}
        <div class="标题">
            开放时间
        </div>
        <div class="文案">
            <div> 2024年黄冈科技职业学院寒假从1月11日开始至2月26日结 束，寒假期间，每周一不开放，其他时间均开放。</div>
        </div>
        <div class="标题">
            开放地点
        </div>
        <div class="文案">
            <div>黄冈科技职业学院何家湖校区校园</div>
            <div style="color: rgba(85, 85, 85, 1);">（不包括学生宿舍、办公室）</div>
        </div>
        <div class="标题">
            开放对象
        </div>
        <div class="文案">社会各界人士</div>
        <div class="标题">
            来访须知
        </div>
        <div id="来访须知" class="文案">
            1.进入校园内的所有车辆必须按照道路标识行驶，车辆限15km/h，遵守行人优先原则。请将车辆按照车位停放要求有序停放。<br>
            2.进入校园，请服从学校工作人员的指挥，响应文明校园建设，自觉维护校园秩序，爱护校园内花草树木，禁止翻越护栏、攀爬折枝、采摘瓜果、挖掘植物、破坏设施标牌，请勿随地吐痰、乱扔垃圾，请勿在校园内大声喧哗。来访期间，请注意自身安全，保管好自己的随身物品。
        </div>
        <div id="操作按钮">
            <div class="立即预约"  @click="immediatelyBooking">
                立即预约
            </div>
            <div class="立即预约" @click="bookingVisitSchoolList">
                我的预约
            </div>
            
        </div>


        
<van-share-sheet
      v-model:show="showShare"
        title="立即分享和个人中心"
      :options="options"
      @select="onSelect"
       @cancel="onCancel"
    />

    <van-popup  v-model:show="show" :style="{ padding: '64px' }"><Qrcode :value="qrCodeValue" :options="qrCodeOptions" /></van-popup>

<van-floating-bubble
    axis="xy"
    magnetic="x"
    :gap="32"
    @click="showShare=true"
    @offset-change="onOffsetChange"
    class="showShare"
  >
    <!-- <img src="../assets/图片/通用/分享.png" alt="自定义图标" /> -->
    <img src="../assets/图片/780.jpg" alt="自定义图标" />

  </van-floating-bubble>

    </div>
</template>

<style scoped>
.showShare img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: auto;
}

.showShare{
    position: fixed; 
    background-color: aliceblue;
     width: 30px; 
     line-height: 30px; 
     height: 30px;
     border-radius: 50%;
     z-index: 5; 
     right: 30px;
    top: calc(50% + 200px) ;
}

.标题栏占位 .IMG{
    width: 20px;
  line-height: 100%;
    margin: auto;
    padding-right: 20px;
}
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
.组件根标签 {
   background-color: #FFF;
    font-size: 14px;
    height: 454px;
}

.标题栏占位 {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  
}

.标题栏 {
    display: flex;
    font-size: 17px;
    align-items: center;
    height: 44px;
    justify-content: space-between;
    box-sizing: border-box;
    width: 375px;
  
    background-color: aliceblue;
  
}

.返回箭头 {
    width: 9px;
    height: 18px;
}
#操作按钮 {
    position: fixed;
    top: 550px;
    width: 320px;
    left: calc(50% - 160px);
    display: flex;
    justify-content: space-between;
}

.立即预约 {
    width: 140px;
    border-radius: 20.5px;
    line-height: 41px;
    text-align: center;
    background: rgba(120, 78, 35, 1);
    font-size: 16px;
    color: #FFF;
    letter-spacing: 3px;
    font-weight: bold;
}

.组件根元素 {
    background: #FFF;
}

#来访须知 {
    padding: 0 17px;
    line-height: 20px;
    text-align: left;
}

.标题 {
    width: 140px;
    height: 34px;
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(255, 237, 209, 1) 0%, rgba(255, 255, 255, 0) 100%);
    margin: 15px auto;
    text-align: center;
    font-size: 18px;
    color: rgba(133, 93, 54, 1);
    font-weight: bold;
    line-height: 34px;
}

.文案 {
    font-size: 14px;
    color: rgba(17, 34, 51, 1);
    text-align: center;
    line-height: 24px;
}

#封面图 {
    width: 375px;
    display: block;
}
</style>
